<template>
  <div class="center-k">
		<!-- 返回 -->
    <van-nav-bar
      class="head"
      title="问答"
      left-text
      right-text
      left-arrow
      @click-left="onClickLeft"
    />
		
		<section>
    
      <van-row class="zhuyi" v-for="(item,i) in list" :key="i">
        <van-col class="t" span="8">
          <h4 class="bb-k">宝宝晒太阳有哪些注意事项吗?</h4>
          <div class="beizhu">
            <img class='ttx-k' :src="item.uimg" />
            <span>{{item.uname}}</span>
          </div>
          <aside class="duanluo-k">
           {{item.text}}
          </aside>
					<p class="pl-k">{{item.attention}}个赞·{{item.number}}个评论</p>
        </van-col>
      </van-row>
 
		
		</section>
		
  </div>
</template>
<script>
import Axios from 'axios';
export default {
  name: "Answer",
  data() {
    return {
		list:[]
	};
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }   
  },
  mounted() {
	  let that = this
	 Axios({
		 url:'http://www.answer.com/api'
	 }).then(function(data){
		 that.list = data.data.list
	 })
  },
};
</script>
<style scoped>
	html,body{
		height: 100%;
		width: 100%;
	}
	.center-k{
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.head{
		height: 42px;
		background-color: rgba(249, 249, 249, 1);
		color: rgba(100, 100, 100, 1);
		font-size: 14px;
		text-align: center;
		font-family: Arial;
		border: 1px solid rgba(255, 255, 255, 0);
	}
	.van-icon{
		color: #000000;
		font-weight: bold;
	}
	/* section */
	section{
		flex: 1;
		overflow: auto;
		padding-top:16px;
		box-sizing:border-box;
	}
	
	.zhuyi{
		width: 100%;
		height: 238px;
		background-color: rgba(242, 242, 242, 1);
		text-align: center;
		box-sizing:border-box;
		padding:18px 23px 0;
		display: flex;
		flex-direction: column;
		margin-top: 20px
	}
	
.t{
	  width: 100%;
		margin:0;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
}
.t .bb-k{
	  width: 100%;
		height: 20px;
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: left;
		font-family: PingFangSC-regular;
}


.beizhu {
  width: 200px;
  height: 40px;
	margin-top: 9px;
	
}
.beizhu .ttx-k {
  width: 30px;
  height: 30px;
  background: palevioletred;
  border-radius: 50%;
	overflow: hidden;
}
.beizhu {
  display: flex;
  align-items: center;
	height:30px;
}
.beizhu span {
  margin-left: 5px;
  font-size: 14px;
}
.duanluo-k {
	width: 100%;
	height: 50px;
	color: rgba(102, 102, 102, 1);
	font-size: 12px;
	margin-top: 11px;
	padding-top: 0;
	line-height: 18px;
	  text-overflow:ellipsis;
	  overflow: hidden;
}
.pl-k{
	margin-top:12px;
	height: 17px;
	color: rgba(102, 102, 102, 1);
	font-size: 12px;
	text-align: left;
}
</style>
